import React from 'react';
import ReactDom from 'react-dom';
import './teams.scss';
import { api } from 'js/api/api';
import Button from 'views/component/button/button';
import utils from 'js/core/utils';

class Teams extends React.Component {
    constructor() {
        super()
        this.state = {
            selectPet: null,
            petIndex: null
        }
    }
    componentDidMount() {
    }
    select = (item, petIndex) => {
        this.setState({ selectPet: item, petIndex: petIndex })
    }
    petRest = () => {
        api('petRest', { index: this.state.petIndex }, () => {
            this.setState({})
        })
    }
    petBattle = () => {
        api('petBattle', { index: this.state.petIndex }, () => {
            this.setState({})
        })
    }
    render() {
        let { selectPet } = this.state;
        let player = window.player;
        let petTeams = player.petTeams, battleTeams = player.battleTeams;
        let petTeamsNode, infoNode, battleTeamsNode;
        if (selectPet) {
            let fightAttri = selectPet.fightAttri;
            infoNode = <div>
                <div>{selectPet.name}</div>
                <div>生命:{fightAttri.hp}/{fightAttri.maxHp}</div>
                <div>物理攻击力:{fightAttri.attack}</div>
                <div>物理防御力:{fightAttri.pdef}</div>
                <div>法术防御力:{fightAttri.ldef}</div>
                {selectPet.status === 1 ? <button onClick={() => { this.petBattle() }}>出战</button> : <button onClick={() => { this.petRest() }}>休息</button>}
            </div>
        }
        battleTeamsNode = battleTeams.map((item, index) => {
            if (item === 'myself') {
                return <div key={index}>{player.name}</div>
            } else {
                return <div key={index} onClick={() => { this.select(item, index) }}>{item.name}</div>
            }

        })
        petTeamsNode = petTeams.map((item, index) => {
            return <div key={index} onClick={() => { this.select(item, index) }}>{item.name}</div>
        });

        return <div id="teams" className="flex">
            <div className="flex-g-1">
                队伍: {battleTeamsNode}
                携带的妖兽: {petTeamsNode}
            </div>
            <div className="info">{infoNode}</div>
        </div>
    }
}

export default Teams;